<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>响应式和自适应 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/32.8f356b20.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="sidebar-link">01-CSS基本样式和选择器</a></li><li><a href="/./guide/notes/css/04-盒模型.html" class="sidebar-link">02-CSS盒模型</a></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="sidebar-link">03-行内盒模型</a></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="sidebar-link">05-背景样式</a></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="sidebar-link">08-定位</a></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="sidebar-link">09-css样式书写顺序和命名规范</a></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" class="sidebar-link">13-transform</a></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="sidebar-link">14-3D盒阴影和遮罩</a></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="sidebar-link">15-弹性盒模型</a></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="sidebar-link">16-阿里图标 组件化 swiper</a></li><li><a href="/./guide/notes/css/19-响应式.html" class="active sidebar-link">17-响应式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/css/19-响应式.html#响应式和自适应" class="sidebar-link">响应式和自适应</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/19-响应式.html#viewport" class="sidebar-link">viewport</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/19-响应式.html#css新增单位" class="sidebar-link">css新增单位</a></li></ul></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="响应式和自适应"><a href="#响应式和自适应" class="header-anchor">#</a> 响应式和自适应</h2> <p><strong>不同的设备展示效果不一致 ,为了方便用户的使用游览</strong></p> <p><strong>怎么针对不同设置?让显示效果不一致?</strong></p> <ul><li><strong>自适应(通过js来识别 )</strong></li></ul> <blockquote><p>为一个网站开发多个不同的页面,针对不同的设备用户返回不同的页面</p></blockquote> <ul><li><strong>响应式</strong></li></ul> <blockquote><p>做一个网站,能够自动的响应不同设备的变化,出现不同的效果</p></blockquote> <hr> <p><strong>响应式本质是根据设备(游览器的宽度)展示不同的页面效果(修改样式去进行样式覆盖),这里用到的核心就是媒体查询.</strong></p> <p><strong>媒体查询</strong></p> <p>基本概念</p> <ul><li><strong>不同的设备有不同的尺寸 ,使用一套可能不适用所有的情况。</strong></li> <li>简单来说就是针对不同的媒体类型（比如屏幕、打印机或者屏幕阅读器）定义不同的样式，可以针对不同的屏幕尺寸设置不同的样式（比如手机iphone6和iPhone6plus它们两尺寸是不一样的、笔记本电脑和电脑屏幕也是不一样的大小).</li> <li>应用了响应式布局我们就可以实现在小尺寸的屏幕上或者大尺寸的台式机的屏幕上显示的效果是接近的，或者说不至于出现样式的错乱。</li></ul> <p><strong>媒体:设备信息(查询设备的显示宽度),根据不同的条件应用不同的CSS</strong></p> <p><strong>@media 定义媒体查询 查询设备宽度</strong></p> <p><strong>当设备的宽度满足一定条件的时候,样式会生效</strong></p> <ul><li><h3 id="媒体类型-分为四种"><a href="#媒体类型-分为四种" class="header-anchor">#</a> 媒体类型（分为四种）</h3> <ol><li><strong>all</strong>（所有设备）</li> <li><strong>screen</strong>（电脑屏幕，平板电脑，智能手机）</li> <li><strong>print</strong>（打印机和打印预览）</li> <li><strong>speech</strong>（屏幕阅读器等发声设备，一般是供盲人浏览网页使用）</li></ol></li> <li><p><strong>条件</strong></p></li></ul> <p>:<strong>max-width 最大宽度</strong></p> <p><strong>min=width   最小宽度</strong></p> <p><strong>大于使用min-width  媒体类型大于或等于指定宽度时，样式生效</strong></p> <p><strong>小于使用max-width   媒体类型小于或等于指定的宽度时，样式生效</strong></p> <p><strong>小于max-width-------并且大于*min-width  媒体类型小于并且大于指定宽度时,样式生效,中间用and连接</strong></p> <p>给一个范围 而不是固定的值</p> <p><strong>媒体特性</strong></p> <blockquote><p>​    1）(width:700px)</p> <p>​    2）(max-width:700px) 最大值的700 (x&lt;=700)</p> <p>​    3)(min-width:700px) 最小值的700 (x&gt;=700)</p> <p>​    4)(min-width:200px) and (max-width:600px) (200&lt;=x&lt;=600)</p> <p>​    5)(orientation:portrait) 竖屏</p> <p>​    6)(orientation:landscape) 横屏</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>		<span class="token selector">p</span><span class="token punctuation">{</span>
			<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token atrule"><span class="token rule">@media</span> all <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span>800px<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
			<span class="token selector">.info</span><span class="token punctuation">{</span>
				<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	&lt;p&gt;现在页面宽度大于800px&lt;/p&gt;
	<span class="token comment">/*显示将不显示的样式覆盖了*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>		 <span class="token selector">p</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token atrule"><span class="token rule">@media</span> all <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span>1000px<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
			<span class="token selector">p</span><span class="token punctuation">{</span>
				<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	&lt;p&gt;现在页面宽度大于1000px&lt;/p&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li>小于等于1000px,大于等于800px生效  用and连接</li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code>		<span class="token selector">ul</span><span class="token punctuation">{</span>
			<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">ul&gt;li</span><span class="token punctuation">{</span>
			<span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 20px purple inset<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token atrule"><span class="token rule">@media</span> all <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>1000px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span>800px<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
			<span class="token selector">.list</span><span class="token punctuation">{</span>
				<span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
		&lt;ul&gt;
			&lt;li&gt;1&lt;/li&gt;
			&lt;li&gt;2&lt;/li&gt;
			&lt;li&gt;3&lt;/li&gt;
		&lt;/ul&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><ul><li><strong>, 表示或的意思</strong></li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@media</span> all <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
			<span class="token selector">.list</span><span class="token punctuation">{</span>
				<span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token comment">/*多列布局*/</span> 
	<span class="token selector">&lt;ul class=&quot;wrap&quot;&gt;
        &lt;li&gt;1&lt;/li&gt;
        &lt;li&gt;2&lt;/li&gt;
        &lt;li&gt;3&lt;/li&gt;
        &lt;li&gt;4&lt;/li&gt;
        &lt;li&gt;5&lt;/li&gt;
        &lt;li&gt;6&lt;/li&gt;
    &lt;/ul&gt;

	.wrap&gt;li</span> <span class="token punctuation">{</span>
            <span class="token property">border</span><span class="token punctuation">:</span> 2px solid red<span class="token punctuation">;</span>
            <span class="token property">font-size</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
            <span class="token property">margin</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

   <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span>924px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
            <span class="token selector">.wrap&gt;li</span> <span class="token punctuation">{</span>
                <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
                <span class="token property">width</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

       <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span>768px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>992px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
            <span class="token selector">.wrap&gt;li</span> <span class="token punctuation">{</span>
                <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
                <span class="token property">width</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

       <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
            <span class="token selector">.wrap&gt;li</span> <span class="token punctuation">{</span>
                <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
                <span class="token property">width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><ul><li><strong>写很多分界点:你的开发成本也很高.</strong></li></ul> <p><strong>了解常见的网站宽度几个分界点</strong></p> <ul><li><p>超小屏幕(移动设备) 768px 以下</p></li> <li><p>小屏设备 768px-992px</p></li> <li><p>中等屏幕 992px-1200px</p></li> <li><p>宽屏设备 1200px 以上</p></li> <li><p>由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，当然也 可以自己写响应式。</p></li> <li><p>断点什么合适 没有标准答案</p></li> <li><p>一般<strong>1440 1366 1024 768px</strong></p> <p>更详细 市场调研</p></li></ul> <p><strong>怎么引入响应式</strong></p> <p>​    1.内联样式</p> <p>​    2.外部样式引入</p> <p>​    1）link  <link rel="stylesheet" type="text/css" href="1.css" media="screen and (max-width:600px)"></p> <p>​    2)@import  @import url(&quot;1.css&quot;) screen and (max-width:600px);</p> <p>​    写style标签里面的第一排</p> <ul><li><strong>总结一句</strong></li> <li><strong>优点：</strong></li></ul> <p>​    1.面对不同分辨率设备 灵活性强 能够快捷适应问题</p> <p>​    <strong>缺点</strong></p> <p>​    1.工作量很大 代码累赘</p> <p>​    2.使加载时间延长</p> <p>媒体查询好用,但不是万能,并且现在开发也不是纯响应式</p> <p>自适应+响应式</p> <p>判断设备:发给你不同的页面,页面具体响应式的能力.</p> <h2 id="viewport"><a href="#viewport" class="header-anchor">#</a> viewport</h2> <p>移动端适配 viewport 元标签,可以结合比例控制大小来完成移动端适配</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;meta name=<span class="token string">&quot;viewport&quot;</span> content=<span class="token string">&quot;width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no&quot;</span>&gt;
统一手机端设备的分辨率比例<span class="token punctuation">,</span>不允许缩放.

width=device-width ：表示宽度是设备屏幕的宽度
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。禁止缩放 因为缩放 页面布局会乱
user-scalable：用户是否可以手动缩放 yes /no
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><hr> <p><strong>rem :布局思想</strong></p> <p>​	<strong>rem单位:字体大小单位</strong></p> <blockquote><p>和我们的em单位很像<strong>1em =16px</strong></p> <p>假如给一个div标签设置字体大小为20px,里面的子元素字体大小就是20px,里面的1em也就是20px;</p> <p>rem（root elemnet em根元素）是相对于根元素</p><html>,如果html元素没有设置font-size,则默认1rem=16px.<p></p></html></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">&lt;section class=&quot;wrap&quot;&gt;
		我要忘了你的样子1
		&lt;div&gt;
				我要忘了你的样子2
			&lt;div&gt;
				我要忘了你的样子3
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/section&gt;
		.wrap</span><span class="token punctuation">{</span>
			<span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">div</span><span class="token punctuation">{</span>
			<span class="token property">font-size</span><span class="token punctuation">:</span>.8em<span class="token punctuation">;</span><span class="token comment">/*字体大小会依次减小*/</span>
		<span class="token punctuation">}</span>
		<span class="token selector">div</span><span class="token punctuation">{</span>
			<span class="token property">font-size</span><span class="token punctuation">:</span> .8rem<span class="token punctuation">;</span><span class="token comment">/*字体大小完全统一*/</span>
		<span class="token punctuation">}</span>
		<span class="token selector">html</span><span class="token punctuation">{</span>
			<span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p><strong>rem:html根标签的字体大小的倍数,值是完全统一的,标准的衡量单位,通常用于移动端开发</strong></p> <p><strong>不同设备中默认字体大小不一致,但是,看上去是一样大的,和页面成比例.</strong></p> <p>​	<strong>根据不同设备设计的字体大小,来统一页面的大小</strong></p> <p>​		<strong>html标签的字体大小可以关联当前的设备大小</strong></p> <p>​		<strong>html字体大小,就可以用来进行页面开发布局</strong></p> <blockquote><p>同样的内容,使用rem进行布局,如果我在一个较小的设备A上显示为宽度的一半,那换到较大的设备B之后同样也会是宽度的一半.</p></blockquote> <p>​		<strong>rem统一了不同设备的分辨率,使得同一个rem在不同设备占比一致</strong></p> <ul><li>上面说HTML标签大小可以关联到当前设备大小,<strong>怎么关联的呢?</strong></li></ul> <p>​	Js控制查询设备宽度,提供js获取的屏幕宽度,</p> <p>​	设置html标签的字体大小,让页面效果统一.</p> <p>​	<strong>学会获取屏幕宽度</strong>,就可以设置Html的字体大小了.</p> <p><strong>rem适配</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>	<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
        <span class="token keyword">var</span> html <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">function</span> <span class="token function">changeRem</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> width <span class="token operator">=</span> html<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>width<span class="token punctuation">;</span>
            html<span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> width <span class="token operator">/</span> <span class="token number">10</span> <span class="token operator">+</span> <span class="token string">&quot;px&quot;</span>
        <span class="token punctuation">}</span>
        <span class="token function">changeRem</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'resize'</span><span class="token punctuation">,</span> changeRem<span class="token punctuation">)</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><hr> <h2 id="css新增单位"><a href="#css新增单位" class="header-anchor">#</a> css新增单位</h2> <ul><li><strong>VW/VH</strong></li></ul> <blockquote><p><strong>1VW = 设备视口1%宽度</strong></p> <p><strong>1VH = 设备视口1%高度</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">div</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 50vw<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 50vh<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		&lt;div&gt;&lt;/div&gt;
<span class="token comment">/*相对于视口的50%宽高,视口也就是游览器你能够看到的区域*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>1vmin  视口宽度和高度之间的最小值的1/100</strong></p> <p><strong>1vmax 视口高度和宽度之间最大值的1/100</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">div</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 50vmin<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 50vmin<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
<span class="token comment">/*视口宽度和视口高度相比较,视口宽度少于高度,相对于视口宽度的50%,谁小跟谁*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">div</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 50vmax<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 50vmax<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
<span class="token comment">/*视口宽度和视口高度谁大相对于谁*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>和百分比的区别</strong></p> <p>​    百分比会受父级元素的限制</p> <p>​	vw和vh不会受到父级元素的限制</p></blockquote></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="prev">
        16-阿里图标 组件化 swiper
      </a></span> <span class="next"><a href="/./guide/notes/css/less.html">
        less
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/32.8f356b20.js" defer></script>
  </body>
</html>
